<template>
    <div>
        <slot />
        <div class="inline">
            <span>X轴</span>
            <el-select v-model="query.sys" placeholder="全部" />
        </div>
        <div class="inline">
            <span>Y轴</span>
            <el-select v-model="query.sys" placeholder="全部" />
        </div>
        <div class="flex">
            <veScatter class="item" :data="chartData" :settings="chartSettings" />
        </div>
    </div>
</template>

<script>
import veScatter from 'v-charts/lib/line.common.js'
import 'echarts/lib/component/title'
export default {
    components: {
        veScatter
    },
    props: {
        type: String,
        value: Array
    },
    data () {
        this.chartSettings = {
            dimension: '用户类型',
            metrics: ['访问用户']
        }
        return {
            query: {
                sys: undefined
            },
            chartData: {
                columns: ['用户类型', '访问用户'],
                rows: [
                    { 用户类型: '投资人', 访问用户: 1393 },
                    { 用户类型: '创业者', 访问用户: 3530 },
                    { 用户类型: '服务商', 访问用户: 2923 },
                    { 用户类型: '上班族', 访问用户: 1723 },
                    { 用户类型: '在校生', 访问用户: 3792 },
                    { 用户类型: '未认证', 访问用户: 4593 }
                ]
            }
        }
    },
    watch: {
        chartData: {
            deep: true,
            immediate: true,
            handler (val) {
                this.$emit('input', val.rows || [])
            }
        }
    },
    created () {

    },
    updated () {
        this.$emit('input', this.chartData ? this.chartData.rows : [])
    },
    methods: {

    }
}
</script>

<style scoped lang="stylus">
</style>
